<template>
  <view class="pages">
    <view class="header w100">无忧回收平台欢迎你</view>
    <view class="form-wrap w100">
      <u--form labelPosition="left" :model="form" ref="uForm" labelWidth="175" :labelStyle="labelStyle">
        <u-form-item label="企业名称：" prop="userInfo.name" required>
          <u--input v-model="form.name1" border="surround" placeholder="请输入企业名称"></u--input>
        </u-form-item>
        <u-form-item label="联系人：" prop="color" required>
          <u--input v-model="form.name2" border="surround" placeholder="请输入联系人"></u--input>
        </u-form-item>
        <u-form-item label="手机号：" prop="ram" required>
          <u--input v-model="form.name3" border="surround" placeholder="请输入手机号"></u--input>
        </u-form-item>
        <u-form-item label="登录账号：" prop="ram" required>
          <u--input v-model="form.name4" border="surround" placeholder="请输入登录账号"></u--input>
        </u-form-item>
        <u-form-item label="登录密码：" prop="password" required>
          <u--input v-model="form.password" border="surround" placeholder="请输入登录密码"></u--input>
        </u-form-item>
        <u-form-item label="确认密码：" prop="confirm_password" required>
          <u--input v-model="form.confirm_password" border="surround" placeholder="请输入确认密码"></u--input>
        </u-form-item>
        <u-form-item label="验证码：" prop="ram" required>
          <u--input v-model="form.code" border="surround" placeholder="请输入验证码"></u--input>
          <!-- <u-button slot="right" size="mini" type="primary" @click="send">{{codeText}}</u-button> -->
          <u-toast ref="uToast"></u-toast>
          <u-code slot="right" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
          <u-button slot="right" @tap="getCode">{{tips}}</u-button>
        </u-form-item>
      </u--form>
    </view>
    <view class="tips w100">
      <view class="title">
        <u-icon name="bell-fill" color="#3c9cff" size="33"></u-icon>
        <text>温馨提示</text>
      </view>
      <view class="box">
        请如实填写您的信息，我们会在您提交信息后的24小时内联系您，请保持电话畅通，谢谢！
      </view>
    </view>
    <view class="confirm">
      <u-button type="primary" @click="confirm">提交</u-button>
    </view>
  </view>
</template>
<script>
  import store from '@/utils/store'
  export default {
    data() {
      return {
        showStatus: false,
        labelStyle: {
          fontSize: "28rpx",
          color: "#666",
        },
        form: {
          name1: '',
          name2: '',
          name3: '',
          name4: '',
          password: '',
          confirm_password: '',
          name7: '',
        },
        tips: '',
        seconds: 60,
      }
    },
    onShow() {},
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 2000);
        } else {
          uni.$u.toast('倒计时结束后再发送');
        }
      },
      end() {
        uni.$u.toast('倒计时结束');
      },
      start() {
        uni.$u.toast('倒计时开始');
      },
      confirm() {
        if (this.form.name1 == '') return this.$f.toast('请输入企业名称')
        if (this.form.name2 == '') return this.$f.toast('请输入联系人')
        if (this.form.name3 == '') return this.$f.toast('请输入手机号')
        if (this.form.name4 == '') return this.$f.toast('请输入登录账号')
        if (this.form.password == '') return this.$f.toast('请输入登录密码')
        if (this.form.confirm_password == '') return this.$f.toast('请输入确认密码')
        if (this.form.password != this.form.confirm_password) return this.$f.toast('登录密码和确认密码不一致！')
        if (this.form.name7 == '') return this.$f.toast('请输入验证码')
        // this.$http('/order/create', this.form).then(res => {
        //   this.$to('/pages/home/index', {}, 'tab')
        // })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding:16rpx 16rpx calc(16rpx + #{$safe});
  }

  .header {
    border-radius: 16rpx;
    background: linear-gradient(#3fa2ff, #79b2fe);
    font-size: 40rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 185rpx;
    color: #fff;
    margin-bottom: 16rpx;
  }

  .form-wrap {
    border-radius: 16rpx;
    background-color: #fff;
    padding: 34rpx;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 16rpx;

    ::v-deep .item__body__right__content__icon {
      padding-left: 10rpx !important;
      width: 190rpx !important;
    }

    ::v-deep .u-button {
      width: 190rpx !important;
      height: 84rpx !important;
      font-size: 22rpx !important;
      background: #3c9cff;
      border-color: #3c9cff;
      color: #fff;
      text-align: center;
    }
  }

  .tips {
    border-radius: 16rpx;
    background-color: #fff;
    padding: 40rpx 50rpx;
    box-sizing: border-box;
    margin-bottom: 16rpx;

    .title {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #3c9cff;
    }

    .box {
      line-height: 1.5;
      padding-top: 20rpx;
      font-size: 26rpx;
    }
  }


  ::v-deep .u-input {
    padding: 8px 9px !important;
    background-color: #f4f8ff !important;
  }

  ::v-deep .u-form-item__body {
    padding: 12rpx 0;
  }

  ::v-deep .u-border {
    border-color: #f4f8ff !important;
  }

  ::v-deep input {
    font-size: 28rpx !important;
  }

  .confirm {
    width: 80%;
    margin: 0 auto;

    ::v-deep .u-button {
      border-radius: 80rpx !important;
      font-size: 28rpx !important;
    }
  }
</style>
